<template>
  <div id="accessControl">
    <!-- 运营管理背景 -->
    <div class="title"></div>
    <div class="content">
      <!-- 标题 -->
      <div class="accessControlTitle"></div>
      <div class="accessControlContent">
        <progressBar :params="params"></progressBar>
        <!-- <div id="accessChart"></div> -->
        <div class="rollTitle" style="margin-top: 20px">
          <el-row>
            <el-col :span="3">序号</el-col>
            <el-col :span="7">门禁</el-col>
            <el-col :span="3">类型</el-col>
            <el-col :span="4">人员</el-col>
            <el-col :span="7">时间</el-col>
          </el-row>
        </div>
        <div v-show="isShow" class="seamless-warp">
          <vue-seamless-scroll :data="accesslist">
            <ul>
              <li
                v-for="(item, index) in accesslist"
                :key="index"
                @click="flyTo($event)"
              >
                <el-row>
                  <el-col
                    :span="3"
                    :data-obj="JSON.stringify(item)"
                    :id="index + 1"
                    style="font-family: dig; font-size: 36px; font-weight: 900"
                    >{{ index + 1 }}
                  </el-col>
                  <el-col
                    :span="7"
                    class="rollItem"
                    :data-obj="JSON.stringify(item)"
                    :id="index + 1"
                    >{{ item.doorName }}
                  </el-col>
                  <el-col
                    :span="3"
                    class="rollItem"
                    :data-obj="JSON.stringify(item)"
                    :id="index + 1"
                    >{{ item.typename }}
                  </el-col>
                  <el-col
                    :span="4"
                    class="rollItem"
                    :data-obj="JSON.stringify(item)"
                    :id="index + 1"
                    >{{ item.employeeName }}
                  </el-col>
                  <el-col
                    :span="7"
                    class="rollItem"
                    :data-obj="JSON.stringify(item)"
                    :id="index + 1"
                    >{{ getLocalTime(item.eventDate) }}
                  </el-col>
                </el-row>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div class="empty" v-show="!isShow">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import progressBar from "../../../common/progressBar.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import { TUVector3 ,TURotator} from "tumap/dist/tumap.v1.8.js";
export default {
  components: {
    progressBar,
    vueSeamlessScroll,
  },
  data() {
    return {
      isShow: false,
      securityStatus: {
        public: {
          total: 0,
          fault: 0,
        },
        work: {
          total: 0,
          fault: 0,
        },
        parking: {
          total: 0,
          fault: 0,
        },
      },
      params: {
        leftBottomValue: "报警", //左上文字
        leftTopValue: 18, //左侧数字
        rightBottomValue: "总数", // 右侧文字
        rightTopValue: 50, // 右侧数字
        showMiddleTop: false, // 是否显示中间统计信息，默认为不显示
        middleTopText: "", // 中间文字，showMiddleTop为true有效
        middleTopValue: "", // 中间总数，showMiddleTop为true有效
        leftNumberColor: "#3393FF", // 左侧数字颜色
        rightNumberColor: "#ffffff", // 右侧数字颜色
        activeColor: "#3393FF", // 进度条的颜色
      },
      accesslist: [],
      allEquipments: [],
    };
  },
  mounted() {
    var temtreeData = JSON.parse(window.sessionStorage.getItem("treeData"));
    this.treeForeach(temtreeData, (node) => {
      node.code && this.allEquipments.push(JSON.parse(JSON.stringify(node)));
    });
  },
  methods: {
    // 飞到门禁处
    flyTo(e) {
      window.Sgworld.clearAllCovering();
      // var timetype = window.sessionStorage.getItem("timeType");
      // var weathertype = window.sessionStorage.getItem("weatherType");
      // window.Sgworld.execute("grapi", "settime", { type: timetype }, null);
      // window.Sgworld.execute(
      //   "grapi",
      //   "setweather",
      //   { type: weathertype },
      //   null
      // );
      let item = JSON.parse(e.target.dataset.obj);
      // 取出当前点击的code值
      var temCode = item.equipmentCode;
      if (temCode) {
        var temArr = JSON.parse(JSON.stringify(this.allEquipments));
        for (var i = 0; i < temArr.length; i++) {
          var temid = temArr[i].code;
          if (temid == temCode) {
            var newX = temArr[i].position.x;
            var newY = temArr[i].position.y;
            var newZ = temArr[i].position.z;
            var newRoll, newPitch, newYaw;
            var params = {
              name: temCode,
              location: new TUVector3(newX, newY, newZ),
              rotate: -45
            };
            // 从校验后的位置中取值
            axios.get("./static/json/PositionCalibration.json").then(res => {
              var positionCalibrationData = res.data;
              var tem = positionCalibrationData.find(item => {
                return item.name === temCode;
              });
              // 若当前点击的节点在校验文件中
              // 从校验文件中取值，并通过focusOn方法定位
              if (tem) {
                newRoll = tem.degree && tem.degree.roll;
                newPitch = tem.degree && tem.degree.pitch;
                newYaw = tem.degree && tem.degree.yaw;
                window.Sgworld.focusOn(
                  new TUVector3(newX, newY, newZ),
                  new TURotator(newRoll, newPitch, newYaw),
                  200,
                  () => {},
                  2
                );
              } else {
                // 当前点击的不在校验文件中 通过 设备名称进行定位
                window.Sgworld.execute("grapi", "AIPawnLocation", params, null);
              }
            });

            // 撒点定位
            var temObj = {};
            temObj.x = temArr[i].position.x;
            temObj.y = temArr[i].position.y;
            temObj.z = temArr[i].position.z;
            temObj.name =
              "门禁管理-" + temArr[i].floorId + "-" + temArr[i].code;
            temObj.id = temArr[i].floorId + "_" + temArr[i].id;
            temObj.scale = 0.3;
            temObj.image = window.ipUrl + "qy/static/images/popups/alarm.png";
            window.Sgworld.createBillboard(temObj);
            break;
          }
        }
      } else {
        this.$message("该条信息暂无code值！");
      }
    },
    // 时间戳转为普通日期格式
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, " ");
    },
    // 树的广度遍历
    treeForeach(tree, func) {
      let node,
        list = [...tree];
      while ((node = list.shift())) {
        func(node);
        node.children && list.push(...node.children);
      }
    },
  },
  sockets: {
    sendAqSecurityStatus(data) {
      let aqSecurityInfo = JSON.parse(data);
      this.accesslist = aqSecurityInfo.adsMjInoutList;
      if (this.accesslist.length > 0) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  },
};
</script>
<style scoped>
.accessControlTitle {
  width: 732px;
  height: 64px;
  background: url("../../../../../static/images/safety/accessControl.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* margin-bottom: 25px; */
}

.accessControlContent {
  margin-top: 10px;
  text-align: center;
}
.progress {
  width: 820px;
  height: 40px;
  margin: 20px 0;
  float: left;
}

#accessChart {
  width: 100%;
  height: 300px;
}
.seamless-warp {
  /* width: 100%; */
  height: 240px;
  overflow: hidden;
}
.empty {
  text-align: center;
  font-size: 30px;
  color: white;
  height: 240px;
}
</style>
